<template>
  <div>
    <banner :bannerTextInfo="bannerText"></banner>
  
    <bottomNavCard></bottomNavCard>

    <topNavCard></topNavCard>

    <aroundHoverCard></aroundHoverCard>
 
  </div>
</template>

<script>
export default {
  components: {
    'banner':()=>import("@/components/block/banner/banner"),
    'bottomNavCard':()=>import("@/components/block/card/bottomNavCard"),
    'topNavCard':()=>import("@/components/block/card/topNavCard"),
    'aroundHoverCard':()=>import("@/components/block/card/aroundHoverCard"),
  },
  data() {
    return {
      'bannerText': {
        'title': '产品服务',
        'textInfo': '成功打造出一系列满足广泛需求的商城系统产品',
        'imgUrlOne':'https://lanhu.oss-cn-beijing.aliyuncs.com/ps0438432cb03846cb-981b-464e-83f6-86c481823be6',
        'imgUrlTwo':'https://lanhu.oss-cn-beijing.aliyuncs.com/psfaca9957af5124e2-c605-48ff-8aa0-4db2de0d4f6f'
      },

    }
  },
  created(){

  },
  mounted(){

    
  },
  methods:{
    openBox(e){
      e.currentTarget.childNodes[1].style.opacity=1;
    },
    closeBox(e){
      e.currentTarget.childNodes[1].style.opacity=0;
    }
  }

}
</script>

<style lang="less" scoped>
.white-box {
  padding: 6.19rem 0;
  .title {
    p {
      text-align: center;
      padding-bottom: 3.75rem;
    }
    p:nth-child(1) {
      font-size: 3rem;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
    }
    p:nth-child(2) {
      font-size: 1.13rem;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
    }
  }
  .box-card {
    padding: 5rem 0;
    .info-box {
      display: flex;
      align-items: center;
      .mainBox {
        p {
          padding: 2rem 0;
        }
        p:nth-child(1) {
          font-size: 2.25rem;
          font-weight: 500;
        }
        p:nth-child(2) {
          font-size: 1.13rem;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
        }
      }
      .imgBox {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 80%;
        }
      }
    }

    .nav {
      margin-top: 5rem;
      .nav-item {
        transition: all 0.5s;
        cursor: pointer;
        text-align: center;
        padding: 1rem 0;
      }
      .nav-item:hover {
        color: #5ccfda;
      }
    }
  }

  .item {
    cursor: pointer;
    // padding: 5.6rem 9.6rem;
    height: 18.75rem;
    background: #ffffff;
    margin-top: 1rem;
    border: 0.1rem solid rgba(244, 244, 244, 1);
    display: flex;
    align-items: center;
    .item-box {
      cursor: pointer;
      display: flex;
      align-items: center;
      text-align: center;
      img {
        width: 50%;
      }
      .info {
        font-size: 1.5rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
      }
    }
    .item-box-float {
      transition: all 0.5s;
      cursor: pointer;
      position: absolute;
      left: 0;
      height: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      overflow: hidden;
      // background-color: red;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0rem 0rem 1rem 0rem rgba(0, 0, 0, 0.19);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .imgBox {
        width: 4.38rem;
        height: 4.38rem;
        // display: flex;
        img {
          width: 100%;
          height: 100%;
        }
      }
      p {
        // text-align: center;
        padding: 0 2rem;
      }
      .title {
        padding-top: 1rem !important ;
        font-size: 1.5rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        p {
          margin: 0 0;
          padding: 0 0;
        }
      }
      .info {
        font-size: 1rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
      }
    }
  }
  // .item:hover{
  //   .item-box-float{
  //     width: 100%!important;
  //     height: 100%!important;
  //   }
  // }
}

.black {
  background-color: #f7f7f7 !important;
  .nav {
    // margin-top: 5rem;
    border-bottom: 0.06rem solid #e5e5e5;
    .nav-item {
      transition: all 0.5s;
      cursor: pointer;
      text-align: center;
      padding: 1rem 0;
    }
    .nav-item:hover {
      color: #5ccfda;
    }
  }
  .info {
    margin-top: 3rem;
    display: flex;
    align-items: center;
    .imgBox {
      width: 100%;
      img {
        width: 100%;
      }
    }
    .infoBox {
      // text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      p:nth-child(1) {
        font-size: 3rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        padding: 2rem 0;
      }
      p:nth-child(2) {
        font-size: 1.13rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        padding-bottom: 3rem;
      }
      .button {
        cursor: pointer;
        text-align: center;
        line-height: 5.25rem;
        width: 20.56rem;
        height: 5.25rem;
        border: 1px solid rgba(20, 220, 239, 1);
        border-radius: 3rem;
        font-size: 1.88rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(92, 207, 218, 1);
      }
    }
  }
}
</style>